import React, {
    useState,
    useEffect
} from "react";
import Modal from "../modal";
import Scrollbars from "react-custom-scrollbars";
import "./index.scss";
/**
 * 传参：
 * title: 弹出框名称
 * width: 弹出框宽度
 * height: 弹出框内容区域高度
 * children: 弹出框内容区域（即Modal组件含有的子元素，不需要手动传参）
 * visible: 弹出框显隐
 * changeVisible：控制弹出框显隐函数
 * onOk：确认函数
 * onCancel: 取消函数
 * className：弹窗类名
 * noFooter: 不显示默认弹窗底部
 */
function SelectUserModal(props) {
    let {
        visible,
        changeVisible,
        selectUserList,
        title
    } = props;
    const [chooseUserList, setChooseUserList] = useState([]);
    const cancelModal = () => {
        typeof changeVisible === "function" &&
        changeVisible(false);
    }
    useEffect(() => {
        if(Array.isArray(selectUserList)){
            // let list = JSON.parse(JSON.stringify(chooseUserList)
            setChooseUserList(selectUserList);
        }
       
    }, [selectUserList])
    return (
        <Modal
            type="1"
            title={title? title: "选择对象"}
            visible={visible}
            changeVisible={changeVisible}
            noFooter={true}
            width={900}
            destroyOnClose={true}
            className={`select_user_modal`}
            bodyStyle={{height: 592 + 'px', padding: 0}}
        >
            <div className="select_modal_left">
                <div className="select_user_container">
                    {
                        chooseUserList.map((item, index)=>{
                            return (
                                <div className="select_user_one" title={`${item.UserName}(${item.UserID})`} key={index}>
                                    {item.UserName}
                                    <span style={{color: "#999"}}>({item.UserID})</span>
                                    <i className="closelogo"></i>
                                </div>
                            )
                        })
                    }
                    <div className="select_user_one" title={"彭志文(pengzhiwen)"}>
                        彭志文
                        <span style={{color: "#999"}}>(pengzhiwen)</span>
                        <i className="closelogo"></i>
                    </div>
                </div>
                <div className="operate_btn">
                    <div className="confirm_btn">确定</div>
                    <div className="cancel_btn" onClick={cancelModal}>取消</div>
                </div>
            </div>
            <div className="select_modal_right">
                <div className="select_menu_one">
                    <i className={"contactlogo "}></i>
                    最近联系人
                </div>
                <div className="select_menu_one">
                    <i className={"contactlogo "}></i>
                    常用联系人
                </div>
                <div className="select_menu_one">
                    <i className={"contactlogo "}></i>
                    全校师生
                </div>
                <div className="select_menu_one">
                    <i className={"contactlogo "}></i>
                    学校管理员
                </div>
            </div>
        </Modal>
    )
}

export default SelectUserModal;
  
